<script lang="ts" setup>

import { createNumberArr } from '../../common/utils/normalUtils'
import { computed, ref, Ref } from 'vue'

const props = defineProps({
  dataSource: {
    type: Array,
    default: function() {
      return []
    }
  },
  blankNum: {
    type: Number,
    default: 20
  },
  itemClass: {
    type: String,
    default: ''
  },
  gap: {
    type: String,
    default: '20px'
  },
  gap2: {
    type: String,
    default: '20px'
  },
  itemSize: {
    type: Object,
    default: function() {
      return {
        width: '300px',
        height: '240px'
      }
    }
  }

})
const blankList:Ref<any[]> = ref(createNumberArr(props.blankNum))

const innerWidth = computed(() => {
  return {
    width: `calc(100% + ${props.gap})`
  }
})

const itemGap = computed(() => {
  return {
    paddingRight: props.gap,
    paddingBottom: props.gap2
  }
})

const itemSize = computed(() => {
  const style:any = { }
  if (props.itemSize.width)style.width = props.itemSize.width
  if (props.itemSize.height)style.height = props.itemSize.height
  if (props.itemSize.maxHeight)style.maxHeight = props.itemSize!.maxHeight
  if (props.itemSize.maxWidth)style.maxWidth = props.itemSize!.maxWidth
  if (props.itemSize.minHeight)style.minHeight = props.itemSize?.minHeight
  if (props.itemSize.minWidth)style.minWidth = props.itemSize?.minWidth
  return style
})

</script>

<template>
  <!--项目列表-->
  <div class="tile-container">
    <div class="tile-container-inner"
         :style="innerWidth">
      <div v-for="(item,index) of dataSource"
           class="tile-item-box"
           :style="itemGap">
        <div class="tile-item-inner" :style="itemSize">
          <slot :data="item" :item="item" :index="index" />
        </div>
      </div>

      <div v-for="iii of blankList"
           :key="iii"
           class="tile-item-box tile-item-blank"
           :style="itemGap">
        <slot name="blank">
          <div class="tile-item-inner" :style="itemSize" />
        </slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.tile-container{
  flex:none;
  width:100%;
  overflow: hidden;

  .tile-container-inner{
    @include tile-group() ;
    @include v-ly-between();
    overflow: hidden;

    .tile-item-box{
      flex:none;
      box-sizing: border-box;
      .tile-item-inner{
        flex:none;
        position:relative;
        box-sizing: border-box;
      }
    }

    .tile-item-blank{
      flex:none;
      height:0px!important;
      overflow: hidden!important;
      box-sizing: border-box!important;
      padding-bottom: 0!important;
    }

  }
}
</style>
